let app=new Vue({
    el:'#app',
    data:{
        examPaperResult:JSON.parse(sessionStorage.getItem("examPaperResultAnalyse")),
        rank:null,          //名次
        avg:null,           //年级平均分
        paperQuestions: [],  // 存储试题数据
        singleCount: 0,    // 记录单选题数量
        multipleCount: 0,  // 记录多选题数量
        judgeCount: 0,    // 记录判断题数量 
        errorSingleCount: 0,    // 记录单选题错题数量
        errorMultipleCount: 0,  // 记录多选题错题数量
        errorJudgeCount: 0,    // 记录判断题错题数量 
        paperQuestionScores:[], //所有试题的分数
        studentScores:[],       //所有对应试题考生的分数
        questionNum:[]          //试题数
    },
    created(){
        // 根据试卷ID查询成绩名次及年级平均分
        $.ajax({
            url: 'http://localhost:8080/examPaperResult/selectRankByExamPaperId',
            type: 'post',
            data: { examPaperId: this.examPaperResult.examPaperId },
            success: function (vo) {
                if (vo.code == 200) {
                    // 获取总分
                    let sum=0;
                    for(let i=0;i<vo.data.length;i++){
                        sum=sum+vo.data[i].studentScore;
                        if(app.examPaperResult.examPaperResultId==vo.data[i].examPaperResultId){
                            // 年级名次
                            app.rank=i+1;
                        }
                    }
                    // 对年级平均分保留一位小数
                    app.avg=(sum/vo.data.length).toFixed(1);

                }

            }
        });

        // 根据试卷结果的编号查询错题信息及各题型数量
        $.ajax({
            url: 'http://localhost:8080/errorQuestion/selectByExamPaperResultId',
            type: 'post',
            data: { examPaperResultId: this.examPaperResult.examPaperResultId },
            success: function (vo) {
                if (vo.code == 200) {
                    app.paperQuestions = vo.data;
                    app.singleCount = vo.singleCount;
                    app.multipleCount = vo.multipleCount;
                    app.judgeCount = vo.judgeCount;

                    app.myChart1();

                    for(let i=0;i<vo.data.length;i++){
                        app.paperQuestionScores.push(vo.data[i].paperQuestionInfo.score);
                        app.studentScores.push(vo.data[i].customerScore);
                        let str="第"+(i+1)+"题";
                        app.questionNum.push(str);
                    }
                    app.myChart3();
                }
            }
        });

        // 根据试卷结果的编号查询各题型错题数量
        $.ajax({
            url: 'http://localhost:8080/errorQuestion/selectErrorByExamPaperResultId',
            type: 'post',
            data: { examPaperResultId: this.examPaperResult.examPaperResultId },
            success: function (vo) {
                if (vo.code == 200) {
                    app.errorSingleCount = vo.singleCount;
                    app.errorMultipleCount = vo.multipleCount;
                    app.errorJudgeCount = vo.judgeCount;
                 
                    app.myChart2();
                }
            }
        });
        
    },
    methods:{
        myChart1(){
            let myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                // 鼠标悬停时的提示框
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"  // 显示百分比
                },
                series: [
                    {
                        color: ['#36a3f7','#EEEE00','#77DDFF'],
                        name: '题型',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '65%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data: [          // 数据数组，name 为数据项名称，value 为数据项值
                            { value: app.singleCount, name: '单选题' },
                            { value: app.multipleCount, name: '多选题' },
                            { value: app.judgeCount, name: '判断题' }
                        ]
      
                    }
                ]
            })
        },
        myChart2(){
            let myChart2 = echarts.init(document.getElementById('main2'));
            myChart2.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"
                },
                series: [
                    {
                        color: ['#36a3f7','#EEEE00','#77DDFF'],
                        name: '题型',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '65%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data: [          // 数据数组，name 为数据项名称，value 为数据项值
                            { value: app.errorSingleCount, name: '单选题' },
                            { value: app.errorMultipleCount, name: '多选题' },
                            { value: app.errorJudgeCount, name: '判断题' }
                        ]
                    }
                ]
            })
        },
        myChart3(){
            let myChart = echarts.init(document.querySelector("#main3"),'light');

            myChart.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter:function(params){
                        return params[0].name + '<br/>'
                                + params[0].marker + '得分' + ':' + params[1].data + '<br/>'
                                + params[0].marker + '可提升空间' + ':' + (params[0].data - params[1].data)
                    },
                    textStyle:{
                        align:'left'  // 提示框文字左对齐
                    }
                },
                color:["#8FBC8F","#33CC66"],
                legend: {
                    data: ['题目分数','您的得分']
                },
                xAxis: {
                    data: app.questionNum
                },
                yAxis: {
                    splitArea: {show: false}
                },
                series: [
                    {
                        barWidth:50,
                        name: "题目分数",
                        type: "bar",
                        // z:"-1",
                        data: app.paperQuestionScores
                    },
                    {
                        barWidth:50,
                        name: "您的得分",
                        type: "bar",
                        // z:"11",
                        barGap:'-100%',//重叠效果(可放在任意一个组中)
                        data: app.studentScores
                    }
                ],
                dataZoom: [//滑动条
                    { 
                        xAxisIndex: 0,//这里是从X轴的0刻度开始
                        show:true,//是否显示滑动条，不影响使用
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 9  // 一次性展示10个。
                    }
               ]
            })
        }
    },
    filters: {
        dateFormat: function (result) {
            var h = Math.floor(result / 3600) ;
            var m = Math.floor((result / 60 % 60));
            var s = Math.floor((result % 60));
            if (h == 0) {
                result = m + "分" + s + "秒";
            } else {
                result = h + '时' + m + "分" + s + "秒"
            }
            return result;
        }
    }
});